<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2021/11/3
  Time: 9:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="order by dede58.com/" />
    <title>每日吐槽</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv='refresh' content="${emos.size()+20}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <link rel="stylesheet" type="text/css" href="/style/css/style_2_common.css" />
    <link rel="stylesheet" type="text/css" href="/style/css/style_2_portal_list.css" />
    <script src="/style/js/common.js" type="text/javascript"></script>
    <script src="/style/js/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="/style/js/pace.js" type="text/javascript"></script>
    <link href="/style/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        html,body{
            height: 100%;

            user-select: none;

        }
        #box{
            overflow: hidden;
            position: relative;
            height: 100%;
            background-color: rgba(0,0,0,0.8);

        }
        #bottom{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 80px;

        line-height: 80px;
        text-align: center;
        background-color: rgba(0,0,0,0.8);
        }
        #input{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -20px -350px;
            font-size: 0;
        }
        #text{
            float: left;
            width: 600px;
            height: 40px;
            font-size: 14px;
            border-radius: 5px 0 0 5px;
            border: none;
        }
        #send{
            float: left;
            width: 100px;
            background-color: #65c33d;
            line-height: 36px;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
        }
        #show_box{
            transition: 0.3s;
        }
        .show{
            position: absolute;
            overflow: hidden;
            color:#FFAAAA;
            font-size: 24px;
            font-weight: bold;
            animation: playing .5s linear;
        }
        @keyframes playing {
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}

        }


    </style>
</head>
<body id="nv_portal" class="pg_list pg_list_1 pg_list_6">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div id="toptb" class="cl" style="display:none;"> </div>
<div id="hd" style="background:#FFF; height:60px; border-bottom:1px solid #E6E6E6; ">
    <div class="clear"></div>
    <div id="week_nav">
        <div class="wk_navwp">
            <div class="wk_lonav">
                <div class="wk_logo">
                    <h2><a href="index.html" title=""><img src="${pageContext.request.contextPath}/style/images/logo1.png" alt="" border="0" /></a></h2>
                </div>
                <div class="wk_inav">
                    <ul class="nav">
                        <li><a onclick="location.reload()" style="cursor: pointer">首页</a></li>


                        <li >
                            <h3 class="username">欢迎您：${sessionScope.user.username}</h3>

                        </li>

                        <li><a href="/outLogin">注销</a></li>


                        <%--                        <li><a href="about.html" >关于我们</a></li>--%>

                        <%--                        <li><a href="news.html" >新闻资讯</a></li>--%>

                        <%--                        <li><a href="case.html" >项目案例</a></li>--%>

                        <%--                        <li><a href="wenti.html" >常见问题</a></li>--%>

                        <%--                        <li><a href="contact.html" >联系我们</a></li>--%>

                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

<div id="mu" class="cl">
    <div class="wp"> </div>
</div>
<script src="/style/js/week_nav.js" type="text/javascript"></script>
<div id="box">
    <div id="screen"></div>
    <div id="bottom">
        <div id="input">
            <input type="text" value="请输入你的弹幕" id="text">
            <input type="button"  value="进行吐槽" style="float: left;
            width: 100px;
            background-color: #65c33d;
            line-height: 36px;
            font-size: 16px;
            color: #fff;
            cursor: pointer;">
        </div>
    </div>
    <div id="show_box">

        <c:forEach items="${emos}" var="emo">
        <div class="show" id="show_move" style="position: absolute">
            ${emo.con}
        </div>
        </c:forEach>

    </div>
</div>
<script src="/style/common.js"></script>
<script>
    var show_move = document.getElementById('show_move');
    var send = document.getElementById('send');
    var text = document.getElementById('text');
    var input = document.getElementById('input');
    var show_box = document.getElementById('show_box');
    var elementsByClassName = document.getElementsByClassName("show");



    text.style.color = '#DDD';
    var color = text.style.color;
    var t = text.value;

    text.onfocus = function () {

        if( text.value === t){
            text.value = '';
            text.style.color = '#000';
        }
    };
    text.onblur = function () {
        if(text.value === '') {
            text.value = t;
            text.style.color = color;
        }

    };
    //调用
    // init(show_move);
    for (let i = 0; i < elementsByClassName.length; i++) {
        // console.log(elementsByClassName[i].innerText)
        init(elementsByClassName[i])
    }





    // send.onclick = sendMsg;
    //发送弹幕
    function sendMsg(v) {
        //新建一个元素
        var mas = document.createElement('div');
        //获取文本框的值
        var content = text.value;
        //设置mas的class属性
        mas.className = 'show';
        //设置mas的内容
        mas.innerText = content;
        //添加到dom空间
        show_box.appendChild(mas);
        //将text的值为空
        text.value = '';
        if(content !== t) {
            init(mas,v);
        }else{
            show_box.removeChild(mas);//删除子元素
        }
    }

    //初始化
    function init(obj,v) {
        console.log("开始发送")
        //浏览器的高度


        var height = document.documentElement.offsetHeight;
        //bottom的高度
        var show_height = input.clientHeight;
        //浏览器的宽度
        if(v == 1)
            var width = document.documentElement.offsetWidth;
        else
            var width = document.documentElement.offsetWidth+getRandom(0,10000);
        //这个是浏览器高度-bottom高度-弹幕的高度
        var maxTop =  height - show_height-obj.clientHeight;
        //这个是浏览器的宽度-弹幕的宽度
        var maxLeft = width - obj.clientWidth;

        // obj.style.value = content;
        var y = getRandom(0,maxTop);
        var x = getRandom(0,1/5*width);
        //设置obj（show_move）
        obj.style.top = y + 'px';
        obj.style.left = x + 'px';
        //设置弹幕的颜色
        obj.style.color = randomColor();
        //设置弹幕旋转
        show_box.style.transition = '.4s';


        //设置弹幕移动
        move(obj,maxLeft);

    }
    //弹幕随机颜色
    function randomColor() {
        var color = '#';
        for(var i =0 ;i<6;i++){
            color += Math.floor(Math.random()*16).toString(16);
        }
        return color;

    }
    //弹幕移动
    function move(obj,maxLeft){
        maxLeft -= 3;
        obj.style.left = maxLeft +'px';
        requestAnimationFrame(function () {//升级版定时器
            if(maxLeft < -obj.clientWidth){
                show_box.removeChild(obj);//父节点删除子节点

            }else{
                //init(obj);//重复循环，魔化，弹幕机器人
                move(obj,maxLeft);
            }

        })

    }
</script>



    <div class="bottom">

        <!--[diy=wk_about_diy2]-->

        <div id="wk_about_diy2" class="area">
            <div id="framep2n1bg" class=" frame move-span cl frame-1">
                <div id="framep2n1bg_left" class="column frame-1-c">
                    <div id="framep2n1bg_left_temp" class="move-span temp"></div>
                    <div id="portal_block_19" class="block move-span">
                        <div id="portal_block_19_content" class="dxb_bc">


<!--
                            <form role="form">
                                <div class="form-group">
                                    <label for="name">吐槽框</label>
                                    <textarea class="form-control" rows="3" id="tu"></textarea>
                                </div>
                                <input type="button"  class="btn btn-info"  value="向我们吐槽" />
                            </form>
-->
                            <script type="text/javascript" src="${pageContext.request.contextPath}/login/layui/layui.js"></script>
                            <link href="${pageContext.request.contextPath}/login/layui/css/layui.css" rel="stylesheet" type="text/css" />

                            <script type="text/javascript">

                                layui.use('layer',function () {
                                    $('input[type="button"]').click(function() {

                                        console.log(1);
                                        var tu = document.getElementById("tu");
                                        var text = document.getElementById("text").value;
                                        var content = text;
                                        console.log(text)
                                        sendMsg(1)
                                        var params = {
                                            username:"${sessionScope.user.username}",
                                            comments:content,

                                        };

                                        if(params.comments === "" || params.comments == null || params.comments=== '请输入你的弹幕'){
                                            ErroAlert("内容不能为空");
                                            return false;

                                        }
                                        else {
                                            $.post("/user/emotionRes", params, function (res) {
                                                console.log(res);
                                                if (res.code === 200) {
                                                    OkAlert("吐槽完成");
                                                    tu.value = "";


                                                } else {
                                                    ErroAlert("吐槽失败");
                                                }

                                            }, "json");
                                        }
                                    });
                                })

                            </script>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--[/diy]-->

    </div>
</div>
<div class="clear"></div>
<div class="project_gray">
    <div class="project">

        <!--[diy=wk_about_diy3]-->


        <!--[/diy]-->

    </div>
</div>
<div class="clear"></div>
<div class="team_box">
    <div class="team">

        <!--[diy=wk_about_diy4]-->



        <!--[/diy]-->

    </div>
</div>
<div id="wp" class="wp">
    <div class="wp"><!--[diy=diy1]-->

        <div id="diy1" class="area"></div>

        <!--[/diy]--></div>

    <!--[diy=listcontenttop]-->

    <div id="listcontenttop" class="area"></div>

    <!--[/diy]-->

    <div class="clear"></div>

    <!--[diy=diycontentbottom]-->

    <div id="diycontentbottom" class="area"></div>

    <!--[/diy]-->

    <div class="wp mtn">

        <!--[diy=diy3]-->

        <div id="diy3" class="area"></div>

        <!--[/diy]-->

    </div>
</div>


</div>
<ul id="scbar_type_menu" class="p_pop" style="display: none;">
</ul>

<link href="/style/css/service.css" rel="stylesheet" type="text/css" />
<div class="main-im">
    <div id="open_im" class="open-im"> </div>
    <div class="im_main" id="im_main">
        <div id="close_im" class="close-im"><a href="javascript:void(0);" title="点击关闭"> </a></div>
        <a href="#" target="_blank" class="im-qq qq-a" title="联系我们">
            <div class="qq-container"></div>
            <div class="qq-hover-c"><img class="img-qq" src="${pageContext.request.contextPath}/style/images/qq.png"></div>
            <span>联系我们</span> </a>
        <div class="im-tel">
            <dt>售前咨询热线</dt>
            <dt class="tel-num">1328493449</dt>
            <dt>售后服务热线</dt>
            <dt class="tel-num">1328493449</dt>
        </div>
        <div class="im-footer" style="position:relative">
            <div class="weixing-container">
                <div class="weixing-show">
                    <div class="weixing-txt">qq扫一扫<br>
                        关注公众号<br>
                        获取更多知识</div>
                    <img class="weixing-ma" src="${pageContext.request.contextPath}/style/images/weixing2.jpg">
                    <div class="weixing-sanjiao"></div>
                    <div class="weixing-sanjiao-big"></div>
                </div>
            </div>
            <div class="go-top"><a href="#" title="返回顶部"></a> </div>
            <div style="clear:both"></div>
        </div>
    </div>
</div>
<script type="text/javascript">

    PTM(document).ready(function(){

        PTM('#close_im').bind('click',function(){

            PTM('#main-im').css("height","0");

            PTM('#im_main').hide();

            PTM('#open_im').show();

        });

        PTM('#open_im').bind('click',function(e){

            PTM('#main-im').css("height","272");

            PTM('#im_main').show();

            PTM(this).hide();

        });



        PTM(".weixing-container").bind('mouseenter',function(){

            PTM('.weixing-show').show();

        })

        PTM(".weixing-container").bind('mouseleave',function(){

            PTM('.weixing-show').hide();

        });

    });

</script>
<script src="/style/js/home.js" type="text/javascript"></script>
<div id="scrolltop"> <span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>返回顶部</b></a></span> </div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
<div id="discuz_tips" style="display:none;"></div>
<script src="/style/js/discuz_tips.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/login/js/jquery.mockjax.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/login/js/Treatment.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/login/layui/layui.js"></script>
<link href="${pageContext.request.contextPath}/login/layui/css/layui.css" rel="stylesheet" type="text/css" />



</body>
</html>

